<template>
  <div class="CpmOne">
    <hr>
    <h2>setup ref reactive toRefs</h2>
    <h3>数据</h3>
    输入框：<input type="text" v-model="title">
    <pre>
      {{title}}
    </pre>
    输入框：<input type="text" v-model="obj.description">
    <pre>
      {{obj}}
    </pre>
    输入框：<input type="text" v-model="text">
    <pre>
      {{text}}
    </pre>
    <h3>方法</h3>
    <button @click="getTitle()">获取title</button>
    <hr>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue';
export default {
  name: 'CpmOne',
  setup() {
    // 数据
    let title = ref('ref响应式数据')
    let obj = reactive({
      description: 'reactive设置响应式对象',
    })
    let obj1 = reactive({
      text: 'toRefs对象解构'
    })

    // 方法
    let getTitle = () => {
      alert(title.value)
    }
    return {
      title,
      obj,
      ...toRefs(obj1),

      getTitle
    }
  }
}
</script>

<style scoped>

</style>
